@charset "utf-8";
@import url("reset.css");
 
.navigation{
	width: 444px;
	height: 552px;
	margin-top: 50px;
	margin-left: 400px;
	padding-top: 30px;
	background-color: #dcdcdc;
	text-align: center;
	overflow: hidden;
	position: relative;  
}

.navigation ul{
	width: 176px;
	height: 480px;
	position: absolute;
	right: -137px;
	/*transform: translateX(406px);*/
}
		
.navigation li{  
	width: 176px;
	height: 38px;	       
    /*perspective: 100px;*/
    background-color: white;
    padding-bottom: 1px;
    margin-bottom: 2px;
    transition: all .3s;
} 

.navigation li span:first-child{
	display: inline-block;
	width: 38px;
	height: 37px;
	line-height: 37px;
	font-size: 15px;
	color: white;
	background-color: #0077a4;
} 

.navigation ul span:first-child:hover{
	background-color: #00ba2a;
}

.navigation ul span:last-child{
	display: inline-block;
	width: 137px;
	height: 37px;
	line-height: 37px;
	font-size: 13px;	
}

.navigation li span:last-child a{
	text-decoration:none;	
}

.navigation li span:last-child a:hover{
	color: #0076a4;
}

.navigation li:nth-child(1){  
    transition-delay: 0.1s;
}  

.navigation li:nth-child(2){  
    transition-delay: 0.2s;
}  

.navigation li:nth-child(3){  
    transition-delay: 0.3s;
}  

.navigation li:nth-child(4){  
    transition-delay: 0.4s;
}  

.navigation li:nth-child(5){  
    transition-delay: 0.5s;
}

.navigation li:nth-child(6){  
    transition-delay: 0.6s;
}  

.navigation li:nth-child(7){  
    transition-delay: 0.7s; 
}  

.navigation li:nth-child(8){  
    transition-delay: 0.8s;
}  

.navigation li:nth-child(9){  
    transition-delay: 0.9s;
}  

.navigation li:nth-child(10){  
    transition-delay: 1.0s;
}  

.navigation li:nth-child(11){  
    transition-delay: 1.1s;
}  

.navigation li:nth-child(12){  
    transition-delay: 1.2s;
}  

.navigation ul:hover li{
	transform: translateX(-137px);
} 
